<script setup lang="ts">
import { getCurrentInstance, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";

import NavBack from "@/components/nav/back.vue";
import NavBg from "@/components/nav/bg.vue";
import NavSpace from "@/components/nav/space.vue";

onLoad(() => {
  const eventChannel = (
    getCurrentInstance()?.proxy as any
  ).getOpenerEventChannel() as UniApp.EventChannel;
  eventChannel.once("ev-interpretation-data", (resp) => {
    console.log("ev-interpretation-data", resp);

    infoData.name_arr = resp.name.split("");
    infoData.content = resp.content;
  });
});

const infoData = reactive({ name_arr: [] as string[], content: "" });
</script>

<template>
  <NavBack />
  <NavBg url="/package/other/static/interpretation-bg.png" />
  <NavSpace />

  <view class="detail-title">
    <view
      class="detail-title-item"
      v-for="(i, d) of infoData.name_arr"
      :key="d"
    >
      <image
        class="detail-title-icon"
        src="@/package/other/static/interpretation-index-word.png"
      />
      <view class="detail-title-text">{{ i }}</view>
    </view>
  </view>

  <view class="detail-content">
    <view class="detail-content-title">释义</view>
    <view class="detail-content-text">{{ infoData.content }}</view>
  </view>
</template>

<style lang="scss">
page {
  padding-top: 10rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background-color: #fdf5e7;
}

.detail-title {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 156rpx;
  margin: 0 76rpx 20rpx;
  border-radius: 20rpx;
  border: 2rpx solid #e8dcb5;
  background: rgba(255, 249, 232, 0.9);
  // box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(113,71,8,0.10);

  .detail-title-item {
    position: relative;
    margin: 0 10rpx;
  }

  .detail-title-icon {
    display: block;
    width: 84rpx;
    height: 84rpx;
  }

  .detail-title-text {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 56rpx;
    color: #a75236;
    line-height: 80rpx;
    font-weight: bold;
    transform: translate(-50%, -50%);
  }
}

.detail-content {
  position: relative;
  padding: 40rpx;
  margin: 0 40rpx;
  border-radius: 20rpx;
  border: 2rpx solid #b95c47;
  background-color: rgba(255, 255, 255, 0.8);

  .detail-content-title {
    width: 104rpx;
    margin-bottom: 12rpx;
    font-size: 30rpx;
    color: #ffffff;
    line-height: 46rpx;
    text-align: center;
    border-radius: 10rpx;
    background-color: #9b2626;
  }

  .detail-content-text {
    font-size: 26rpx;
    color: #693b37;
    line-height: 56rpx;
    text-align: justify;
  }
}
</style>